<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true">
      <template #title><text>发起投诉</text></template>
    </GlobalTopBar>
    <!-- 内容 -->
    <view class="page_content">
      <view class="content_box">
        <view class="dd_text flex">
          <text class="cltext">订单号：{{ OrderInfo.tid }}</text>
          <text>已完成</text>
        </view>
        <!-- 商品信息 -->
        <!-- 中间服务内容 -->
        <view class="li_center flex">
          <!-- 中间服务内容 -->
          <view
            class="flex"
            style="width: 100%"
            v-if="OrderInfo.service_order_goods_info?.thumbnail"
          >
            <image
              class="cen_img"
              :src="OrderInfo.service_order_goods_info?.thumbnail"
              mode="aspectFill"
            />
            <view class="cen_text_box">
              <view>{{ OrderInfo.service_order_goods_info?.goods_title }}</view>
              <view class="prices"
                >￥{{ OrderInfo.service_order_goods_info?.buy_price }}</view
              >
              <view class="cen_je flex">已支付：￥{{ options.price }}</view>
            </view>
          </view>
        </view>
        <view class="line"></view>
        <view class="topbar flex">
          <view
            class="tabs"
            :class="{ ac: item.is_active }"
            v-for="(item, index) in tabList"
            :key="index + 1"
            @click="item.is_active = !item.is_active"
          >
            {{ item.name }}</view
          >
        </view>
        <view class="tscontent">
          <text>投诉建议：</text>
          <textarea
            class="textareain border"
            v-model="complaint_content"
            type="text"
            placeholder="请输入投诉内容"
          />
        </view>
        <view class="btnbc" @click="tsFun">提交</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';
import SearchInput from '@/components/SearchInput.vue';

const complaint_content = ref('');
const tabList = ref([
  {
    name: '价格',
    is_active: false,
  },
  {
    name: '服务态度',
    is_active: false,
  },
  {
    name: '技术不专业',
    is_active: false,
  },
  {
    name: '我要催单',
    is_active: false,
  },
]);
const searchResult = ref('');
const store = useCounterStore();

// 提交订单投诉
const tsFun = async () => {
  if (!tabList.value.filter((i) => i.is_active).length) {
    uni.showToast({
      title: '请先选择投诉分类',
      icon: 'none',
    });
    return;
  } else if (!complaint_content.value) {
    uni.showToast({
      title: '请输入投诉内容',
      icon: 'none',
    });
    return;
  }
  await request(
    'wxapp/user/doSaveServiceOrderComplaint',
    {
      service_order_id: options.value.id,
      complaint_category_str: tabList.value
        .filter((i) => i.is_active)
        .map((i) => i.name)
        .join(','),
      complaint_content: complaint_content.value,
    },
    'post',
  );
  uni.navigateBack({
    delta: 1,
  });
};

const OrderInfo = ref({});
// 获取服务订单详细数据
const getServiceOrderInfo = async (service_order_id = 4) => {
  OrderInfo.value = await request('wxapp/user/getServiceOrderInfo', {
    service_order_id,
  });
  if (OrderInfo.service_order_evaluate_info?.id) {
    OrderInfo.service_order_evaluate_info.content =
      OrderInfo.service_order_evaluate_info.content.replace(/\n/g, '<br>');
  }
};

const options = ref({});
onLoad((option) => {
  options.value = option;
  getServiceOrderInfo(option.id);
});
</script>

<style lang="scss" scoped>
.topbars {
  background-color: #fff;
}

.page_content {
  box-sizing: border-box;
  padding: 20rpx;
  position: relative;
  background-color: #eaf3fc;
  border: 1rpx solid #6595f6;
}

.content_box {
  background-color: #fff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
}
.topbar {
  margin-bottom: 20rpx;
  .tabs {
    padding: 10rpx 20rpx;
    background-color: #f5f5f7;
    border-radius: 20rpx;
    margin-right: 20rpx;
    border: 1rpx solid #f5f5f7;
    &.ac {
      border: 1rpx solid #4889ff;
      color: #4889ff;
      background-color: #eef5ff;
    }
  }
}

.textareain {
  width: 100%;
  margin: 20rpx 0 0;
  box-sizing: border-box;
  padding: 20rpx;
  border-radius: 10rpx;
}

.btnbc {
  font-size: 30rpx;
  width: 60%;
  margin: 20rpx auto;
  line-height: 80rpx;
  border-radius: 40rpx;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  background: linear-gradient(to right, #3c9eff, #3183ff);
}
.cltext {
  color: $uni-text-color-grey;
}
.dd_text {
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.li_center {
  margin-bottom: 20rpx;
  .cen_img {
    width: 140rpx;
    height: 140rpx;
    border-radius: 10rpx;
    margin-right: 40rpx;
  }
  .cen_text_box {
    flex: 1;
    font-size: 30rpx;
    font-weight: 700;
    line-height: 40rpx;
    .prices {
      color: #ff1a1c;
      font-weight: 500;
    }
  }
  .cen_sl {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    view {
      width: max-content;
    }
  }
}
.line {
  margin: 20rpx 0;
  height: 1rpx;
  background-color: #acd2ff;
}
.cen_je {
  margin-top: 20rpx;
  font-weight: 500;
  font-size: 30rpx;
  justify-content: flex-end;
}
</style>
